<template>
    <div class="container">
        <div>热力图组件演示(Nexus版)</div>
        <div class="mapcontainer">
            <div class="bgImg">
                <img id="rittalPart1" src="./images/rittal_part1.png" alt="rittal back" @load="handlePart1Loaded">
                <heat-map class="heatmap" :svgwidth="heatWidth1" :svgheight="heatHeight1" :opacity="opacity"
                    :points="points" :gradient="gradient" :color-table="colorTable" :min-temp="minTemperature"
                    :max-temp="maxTemperature">
                </heat-map>
            </div>
            <div class="bgImg">
                <img id="rittalPart2" src="./images/rittal_part2.png" alt="rittal part" @load="handlePart2Loaded">
                <heat-map class="heatmap" :svgwidth="heatWidth2" :svgheight="heatHeight2" :opacity="opacity"
                    :points="points" :gradient="gradient" :color-table="colorTable" :min-temp="minTemperature"
                    :max-temp="maxTemperature">
                </heat-map>
            </div>
            <div class="bgImg">
                <img id="rittalPart3" src="./images/rittal_part3.png" alt="rittal part" @load="handlePart3Loaded">
                <heat-map class="heatmap" :svgwidth="heatWidth3" :svgheight="heatHeight3" :opacity="opacity"
                    :points="points" :gradient="gradient" :color-table="colorTable" :min-temp="minTemperature"
                    :max-temp="maxTemperature">
                </heat-map>
            </div>
        </div>
        <div class="control">
            <button class="controlbtn" @click="handleAdd">Add Temperature</button>
            <button class="controlbtn" @click="handleReduce">Reduce Temperature</button>
        </div>
    </div>
</template>

<script>
import { HeatMap } from 'svgui';
export default {
    name: "App",
    components: {
        HeatMap
    },

    data() {
        return {
            curTemp: 20,

            heatWidth1: 0,
            heatHeight1: 0,

            heatWidth2: 0,
            heatHeight2: 0,

            heatWidth3: 0,
            heatHeight3: 0,

            opacity: 0.7,
            points: [],
            gradient: 0.01,
            colorTable: ["#0033FF", "#00FF00", "#FFFF00", "#FF0000", "#400000"],
            minTemperature: -20, // 最小温度
            maxTemperature: 120, // 最大温度
        };
    },

    mounted() {
        this.points = [
            {
                x: 0.6,
                y: 0.5,
                temp: this.curTemp
            },
            {
                x: 0.3,
                y: 0.2,
                temp: this.curTemp
            }
        ]
    },

    methods: {
        handlePart1Loaded(event) {
            const imgElement = event.target;
            this.heatWidth1 = imgElement.width;
            this.heatHeight1 = imgElement.height;
        },

        handlePart2Loaded(event) {
            const imgElement = event.target;
            this.heatWidth2 = imgElement.width;
            this.heatHeight2 = imgElement.height;
        },

        handlePart3Loaded(event) {
            const imgElement = event.target;
            this.heatWidth3 = imgElement.width;
            this.heatHeight3 = imgElement.height;
        },

        handleAdd() {
            this.curTemp = this.curTemp + 5;
            this.points = [
                {
                    x: 0.6,
                    y: 0.5,
                    temp: this.curTemp
                },
                {
                    x: 0.3,
                    y: 0.2,
                    temp: this.curTemp
                }
            ]
        },

        handleReduce() {
            this.curTemp = this.curTemp - 5;
            this.points = [
                {
                    x: 0.6,
                    y: 0.5,
                    temp: this.curTemp
                },
                {
                    x: 0.3,
                    y: 0.2,
                    temp: this.curTemp
                }
            ]
        }
    }
}
</script>

<style scoped>
.container {
    padding: 3%;
    font-family: 'TT Norm Pro';
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 垂直居中 */
    height: 100%;
    /* 如果你希望容器占据其父元素的全部高度 */
}

.mapcontainer {
    position: relative;
    display: flex;
    flex-direction: row;
    margin-top: 50px;
}

.bgImg {
    position: relative;
    margin-right: 50px;
    /* 控制两个容器之间的间距 */
}

#rittalPart3:last-child {
    margin-right: 0;
    /* 移除最后一个容器的右边距 */
}

.heatmap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.control {
    margin-top: 20px;
}

.controlbtn {
    margin: 10px;
}
</style>